<template>
	<div class="tabbar">
		<li 
			v-for="item in list" @click="btn(item.path,item.name)"
			:class="{
				'iconfont':true,
				'hover':item.name==iconName && !item.noHover
			}"
		>
			<span v-html="item.icon" :style="{'font-size':'2em','padding-top':'5px','color':item.color}" style="font-size: 2em; padding-top: 5px;">
			</span>
			<span style="font-size: 0.8em;">
				{{item.name}}
			</span>
		</li>
	</div>
</template>

<script lang="ts">
	import {defineComponent,inject,ref} from 'vue';
	
	export default defineComponent({
		methods:{
			btn(path:string,name:string){
					//修改图标
					this.setIcon(name)
					//调用父回调
					if(path!='')
					this.skip(path)
			}
		},
		
		setup(){
			const list:any=inject('list');
			const skip:any=inject('skip');
			var val=list[0].name;
			let iconName=ref(val);
				
			function setIcon(name:string){
				iconName.value=name;
			}
			
			return {list,iconName,setIcon,skip};
		}
	})
</script>

<style scoped="scoped">
	.tabbar{
		width:100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		font-size: 2em;
		list-style: none;
		padding:5px 0;
	}
	.tabbar li{
		/* flex:1; */
		cursor: pointer;
		line-height: 3.5vh;
		height: 7vh;
		text-align: center;
		display: flex;
		flex-direction: column;
		/* color:#000; */
	}
	.hover{
		color:#fff;
	}

</style>
